<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="gradeDialog"
      :title="dialogTitle"
      class="dialog-addgrade"
      :visible.sync="gradeDialog"
      width="50%"
      append-to-body
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="档次名" prop="gradename">
          <el-input v-model="formInfo.gradename"></el-input>
        </el-form-item>
        <el-form-item label="充值金额" prop="price">
          <el-input v-model="formInfo.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实得金额" prop="real_money">
          <el-input v-model="formInfo.real_money">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="有效期" prop="effective">
          <el-input v-model="formInfo.effective">
            <template slot="append">月</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px;display:flex;">若不设置，则对所有门店有效</div>
        </el-form-item>
        <el-form-item label="使用门店" prop="shop">
          <!-- <el-select v-model="formInfo.shop" style="width:98%" placeholder="请选择门店">
            <el-option label="普通座" value="1"></el-option>
            <el-option label="商务座" value="2"></el-option>
            <el-option label="豪华座" value="3"></el-option>
          </el-select>-->
          <!-- <el-col :span="6"> -->
            <el-select
            style="width:50%"
            v-model="shop"
            multiple
            clearable
            placeholder="请选择"
            @change="getshopInfo"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.store_name"
              :value="item.id"
            ></el-option>
          </el-select>
          <div style="color:#AFAFAF;font-size:14px;display:flex;">若不设置，则对所有门店有效</div>
          <!-- </el-col> -->

        </el-form-item>
        <!-- <el-form-item label="规则配置">
          <el-input value="1、购买当日生效" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-input value="2、仅本人使用" readonly></el-input>
        </el-form-item>-->
        <el-form-item
          :label="index==0?'规则配置':''"
          v-for="(domain, index) in formInfo.domains"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
        >
          <el-input style="position:relative;" v-model="domain.value">
            <!-- <template slot="prepend">{{index+1+'、'}}</template> -->
          </el-input>
          <!-- <span class="solt">{{index+3+'、'}}</span> -->
          <div class="imgposi">
            <img
              class="delcont"
              src="../../assets/img/delimg.png"
              @click.prevent="removeDomain(domain)"
              alt
            />
            <img
              class="addcont"
              src="../../assets/img/addimg.png"
              @click.prevent="addDomain(formInfo.domains)"
              alt
            />
          </div>
        </el-form-item>
        <div style="color:#AFAFAF;font-size:14px;display:flex;margin-left:100px;">最多添加6条</div>
        <el-form-item style="text-align: right;">
          <el-button @click="resetForm('formInfo')">重置</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
import { rechargesellAdd } from "@/api/user";
import { adminStore } from "@/api/menu";
import Base64 from "@/utils/base";
export default {
  name: "DialogAddgrade",
  inject: ["reload"],
  props: {
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      rules: {
        gradename: [
          { required: true, message: "请输入档次名", trigger: "change" }
        ],
        price: [
          { required: true, message: "请输入充值金额", trigger: "change" }
        ],
        real_money: [
          { required: true, message: "请输入实得金额", trigger: "change" }
        ]
        // configuration: [
        //   { required: true, message: "请添加规则配置", trigger: "change" }
        // ]
      },
      gradeDialog: false,
      options: "",
      shop: "",
      formInfo: {
        gradename: "",
        price: "",
        real_money: "",
        effective: "",
        domains: [
          {
            value: ""
          }
        ]
      },
      uservalue: false
    };
  },
  mounted() {},
  created() {
    this.getadminStore();
  },
  methods: {
    getshopInfo(e) {
      this.shop = e;
    },
    getadminStore() {
      adminStore({
        request_data: Base64.encode(JSON.stringify({ store_id: "" }))
      }).then(res => {
         if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.options = res.data;
      });
    },
    removeDomain(item) {
      var index = this.formInfo.domains.indexOf(item);
      if (index !== -1) {
        this.formInfo.domains.splice(index, 1);
      }
    },
    addDomain(val) {
      if (val.length > 5) {
        return;
      }
      this.formInfo.domains.push({
        value: "",
        key: Date.now()
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 保存操作
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          let params = {
            title: that.formInfo.gradename,
            price: that.formInfo.price,
            effective: that.formInfo.effective,
            store_id: that.shop.join(","),
            real_money: that.formInfo.real_money,
            rule_one: that.formInfo.domains[0]
              ? that.formInfo.domains[0].value
              : "",
            rule_two: that.formInfo.domains[1]
              ? that.formInfo.domains[1].value
              : "",
            rule_three: that.formInfo.domains[2]
              ? that.formInfo.domains[2].value
              : "",
            rule_four: that.formInfo.domains[3]
              ? that.formInfo.domains[3].value
              : "",
            rule_five: that.formInfo.domains[4]
              ? that.formInfo.domains[4].value
              : "",
            rule_sex: that.formInfo.domains[5]
              ? that.formInfo.domains[5].value
              : ""
          };
          // if (that.msg === 1) {
          rechargesellAdd({
            request_data: Base64.encode(JSON.stringify(params))
          }).then(res => {
             if(res.status==2){
          that.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            that.$message({
              message: res.message,
              type: "success"
            });
            that.closeDialog();
            that.reload();
          });
          // } else {
          // console.log("error")
          // }

          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.gradeDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
.delcont {
  cursor: default;
  width: 20px;
  height: 20px;
}
.imgposi {
  height: 40px;
  position: absolute;
  display: flex;
  align-items: center;
  right: 10px;
  width: 60px;
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%);
}
.addcont {
  cursor: default;
  width: 20px;
  height: 20px;
}
.solt {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}
::v-deep .el-input-group__prepend {
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-right: none;
  // border-radius: 4px;
  border-radius: 4px 0 0 4px;
  padding: 0 15px;
  width: 1px;
  white-space: nowrap;
}
// .el-input__inner{
//     padding-left: 38px !important;
// }
</style>
